<template>
  <el-form :inline="true" :model="activityQuery" :rules="activityRules">

    <el-form-item label="负责人">
      <el-select
          v-model="activityQuery.owner_id"
          placeholder = "请选择负责人"
          @click="loadOwner"
          clearable>
        <el-option
            v-for="item in ownerOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"/>
      </el-select>
    </el-form-item>
    <el-form-item label="活动名称">
      <el-input v-model="activityQuery.name" placeholder="请输入活动名称" clearable />
    </el-form-item>

    <el-form-item label="活动时间">
      <el-date-picker
          v-model="activityQuery.activity_time"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"/>
    </el-form-item>

    <el-form-item label="活动预算" prop="cost">
      <el-input v-model="activityQuery.cost" placeholder="请输入活动预算" clearable />
    </el-form-item>

    <el-form-item label="创建时间">
      <el-date-picker
          v-model="activityQuery.create_time"
          type="datetime"
          placeholder="请选择创建时间"
          value-format="YYYY-MM-DD HH:mm:ss"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSearch">搜 索</el-button>
      <el-button type="primary" plain @click="onReset">重 置</el-button>
    </el-form-item>
  </el-form>

  <el-button type="primary" @click="add">录入市场活动</el-button>
  <el-button type="danger" @click="batchDel">批量删除</el-button>

  <el-table
      :data="activityList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" width="60" />
    <el-table-column prop="ownerDO.name" label="负责人" />
    <el-table-column property="name" label="活动名称" show-overflow-tooltip />
    <el-table-column property="start_time" label="开始时间" show-overflow-tooltip />
    <el-table-column property="end_time" label="结束时间" show-overflow-tooltip />
    <el-table-column property="cost" label="活动预算" show-overflow-tooltip />
    <el-table-column property="create_time" label="创建时间" show-overflow-tooltip />
    <el-table-column label="操作" width="230">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="total"
      v-model:current-page="currentPage"
  />

</template>

<script setup>
//用户信息列表
import {inject, onMounted, reactive, ref, watch} from "vue";
import {doGet} from "../http/httpRequest.js";
import router from "../router/router.js";

let OptionsOwnerId = reactive({});
let activityQuery = reactive({});
let activityList = ref([{}]);
let ownerOptions = ref([{}]);
let idList=ref([]);
//每页显示多少条数据
let pageSize = ref();
//数据总数
let total = ref();
//当前是第几页
let currentPage = ref();
//定义市场活动搜索表单验证规则
let activityRules = {
  cost : [
    //正则表达式，从网上找，或者AI工具找，找到后需要测试一下，因为有可能找到的正则有问题
    { pattern : /^[0-9]+(\.[0-9]{2})?$/, message: '活动预算必须是整数或者两位小数', trigger: 'blur'}
  ]
}

onMounted(()=>{
  getData(1);
})

//勾选或取消勾选触发此函数 rowsData是一个数组，返回勾选好的多个行信息
function handleSelectionChange(rowsData) {
  idList.value = [];
  rowsData.forEach((data)=>{
    let id = data.id;
    idList.value.push(id);
  })
}

const reload = inject("reload");
//录入市场活动
const add = () => {
  router.push("/dashboard/activity/add");
}
//批量删除
const batchDel = () =>{
}

//详情市场活动
const view = (id) => {
  router.push("/dashboard/activity/detail/"+id);
}
//编辑市场活动
const edit = (id) => {
  router.push("/dashboard/activity/edit/"+id);
}
//删除市场活动
const del = (id) => {}

//这个 watch 监视器传来的新值
watch(currentPage,(newPage)=>{
  console.log("当前页变化：",newPage);
  toPage(newPage);
})
const toPage = (newPage) => {
  getData(newPage);
}
const getData = (current) => {
  let start_time = ''; //开始时间
  let end_time = ''; //结束时间
  for (let key in activityQuery.activity_time) {
    if (key === '0') {
      start_time = activityQuery.activity_time[key];
    }
    if (key === '1') {
      end_time = activityQuery.activity_time[key];
    }
  }

  doGet("/api/activitys", {
    current : current, //当前查询第几页
    //6个搜索条件参数
    owner_id : activityQuery.owner_id,
    name : activityQuery.name,
    start_time : start_time,
    end_time  : end_time,
    cost : activityQuery.cost,
    create_time : activityQuery.create_time
  }).then(resp => {
    console.log(resp);
    if (resp.data.code === 200) {
      activityList.value = resp.data.data.records;
      pageSize = resp.data.data.size;
      total = resp.data.data.total;
    }
  })
}
const loadOwner = () => {
  doGet("/api/owner", {}).then(resp => {
    console.log(resp)
    if (resp.data.code === 200)  {
      ownerOptions.value = resp.data.data;
    }
  })
}
const onSearch = () => {
  getData(1);
}
const onReset = () => {
  activityQuery = {};
}
</script>

<style scoped>
.el-form {
  margin-bottom: 20px;
}
.el-table {
  margin-top: 12px;
}
.el-pagination {
  margin-top: 12px;
}
</style>